<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载效果demo</title>
    <!--引入jQuery-->
    <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
    <style>
        #tipDiv {
            display: none;
            position: absolute;
            left: 39%;
            top: 230px;
            z-index: 9999;
            background: #d9d9d9;
            padding: 10px;
            border-radius: 5px;
        }

        #tipInfo {
            margin-top: 10px;
        }
    </style>
</head>
<body>
<!--主要的div 使用的时候把这段引用到自己的界面中-->
<div id="tipDiv">
    <center><img style="width:25px;" src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R5-50.gif"></center>
    <div id="tipInfo"></div>
</div>
<script type="text/javascript">
    //显示提示
    function showTip(info) {
        $('#tipInfo').html(info);
        $('#tipDiv').show();
    }
    //初始加载提示
    showTip('内容正在加载...');

    //关闭提示
    function closeTip() {
        $('#tipDiv').hide();
    }
</script>

<div class="row">
    <div class="col-md-2 column col-2">
    </div>
    <div class="col-md-8 column col-8">
        <div id="demo" class="carousel slide" data-ride="carousel">
            <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
            </ul>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://b4-q.mafengwo.net/s12/M00/18/DF/wKgED1vMH3mAdMU5AAmStFqH3nE88.jpeg?imageMogr2%2Finterlace%2F1">
                </div>
                <div class="carousel-item">
                    <img src="https://b1-q.mafengwo.net/s12/M00/FC/18/wKgED1vHIYCAENAgAAchWCGZxb459.jpeg?imageMogr2%2Finterlace%2F1">
                </div>
                <div class="carousel-item">
                    <img src="https://p3-q.mafengwo.net/s12/M00/FF/37/wKgED1vJxa-AZPV6AAToDXWc-TQ56.jpeg?imageMogr2%2Finterlace%2F1">
                </div>
            </div>
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
            <div style="position: absolute;left: 50%;top: 80%;transform: translate(-50%, -50%);width: 650px;height:100px;background: rgba(0,0,0,0.3)">
                <div id="shuru">
                    <form action="/homepage/" method="post">
                        <table style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);">
                            <tr>
                                <td>
                                    <input type="text" class="cityinput" id="citySelect"
                                           style="width: 450px;background: white;font-size: 20px" name="city"></td>
                                <td>
                                    <input type="text" name="=type" value="1" style="display: none">
                                    <button type="submit" class="btn btn-outline-primary" id="bu12">搜索</button>
                                </td>
                                <td>
                                    <img
                                            src="../static/img/Icon/yuyin.png"
                                            alt="" style="height:60px;width:55px" id="yuyinimg">
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <script>
                    var recorder;
                    var recorder1;
                    var audio = document.querySelector('audio');

                    function startRecording1() {
                        HZRecorder.get(function (rec1) {
                            recorder1 = rec1;
                            recorder1.start();
                        });
                    }

                    function obtainRecord1(url, callbake) {
                        var record = recorder1.upload(url, callbake)
                    };


                    function startRecording() {
                        HZRecorder.get(function (rec) {
                            recorder = rec;
                            recorder.start();
                        });
                    }

                    function obtainRecord(url, callbake) {
                        var record = recorder.upload(url, callbake)
                    };

                </script>
            </div>
        </div>
    </div>
    <div class="col-md-2 column col-2">
    </div>
</div>
</body>
</html>